<template>
  <el-dialog
    title="修改文章"
    :visible.sync="xiugaiVisible"
    width="50%"
  >
    <el-form ref="formDate" :model="formDate" :rules="rules" label-width="80px">
      <el-form-item label="文章标题:" prop="title" label-width="95px">
        <!-- <span class="poa">*</span> -->
        <el-input v-model="formDate.title" placeholder="请输入文章标签" />
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody" class="fuwenben1" label-width="95px">
        <!-- <span class="poa">*</span> -->
        <quill-editor
          ref="myQuillEditor"
          v-model="formDate.articleBody"
          :options="editorOption"
          class="fuwenben"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        />
      </el-form-item>
      <el-form-item label="视频地址:" label-width="95px">
        <el-input v-model="formDate.videoURL" placeholder="" />
      </el-form-item>
      <el-form-item class="btnstyle">
        <el-button type="primary" @click="queren">修改</el-button> <el-button @click="cancelfn">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
import { editmsg } from '@/api/modules/interview'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  props: ['list', 'indexget2'],
  data() {
    return {
      formDate: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      },
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '文章内容不能为空', trigger: 'change' }
        ] }, content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      xiugaiVisible: false
    }
  },
  methods: {
    async queren() {
      try {
        console.log(this.formDate)
        this.$refs.formDate.validate((flag) => {
          if (!flag) {
            return this.$message.error('标题或内容未填')
          }
        })
        const res = await editmsg({ ...this.formDate })
        console.log(res, '0000000000000000')
        this.$message.success('文章上传成功')
        this.$emit('diaoyong')
        this.xiugaiVisible = false
      } catch (err) {
        this.$message('上传失败')
      }
    },
    cancelfn() {
      this.xiugaiVisible = false
      this.formDate.title = ''
      this.formDate.articleBody = ''
      this.formDate.videoURL = ''
    },
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    },
    onEditorReady(editor) { // 准备编辑器

    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {} // 内容改变事件
  }
}

</script>
<style>
.el-dialog{
    border-radius:8px !important;
}
.el-dialog__header{
    /* border-radius:8px !important; */
    background-color: #409eff;

}
.el-dialog__title{
    color: white;
    font-size: 15px;
}
.el-dialog__headerbtn,.el-dialog__close{
    color: white  !important;
}
.title{
    font-size: 25px;
    margin-bottom: 25px;
}
.tuw{
    font-size: 15px;
}
.span1{
    margin-right: 5px;
}
.mainmsg{
    background-color: #f5f5f5;
    margin-top: 10px;
    padding-top: 5px;
    padding-left: 5px;
}
.fuwenben{
    height: 200px;
}
.fuwenben1{
    padding-bottom:15px;
    margin-bottom: 55px;
}
.el-dialog{
 padding-bottom:15px;
}
.btnstyle{
text-align: center;
}
</style>
